<template>
	<div v-if='contentList.length'>
		<h5 class="middle_title">{{ title }}</h5>
		<div class="hot_pic">
			<div class="hot_pic_item" v-for="item in contentList">
				<a class="block_a" :href="Path + item?.url" target="_blank">
					<div class="img_box"><img class="hot_img_box img_pic" :src="getImgPath(item.headImag || '')" /></div>
					<h6 class="title_description p_descripte">{{ item.title }}</h6>
				</a>
			</div>
		</div>
	</div>

</template>

<script>
export default {
	props: ['title'],
	data() {
		return {
			contentList: [],
			Path: getRootPath(),
		};
	},
	mounted(){
		this.getContentOfChannel();
	},
	methods: {
		getContentOfChannel() {
			let param = {
				pageNum: 1,
				pageSize: 4,
				typeIdStr: 1201
			};
			contentApi.fetchContentOfChannel(param, res => {
				if (res.code == '00000 00000') {
					this.contentList = res.data.records;
				} else {
				}
			});
		},
		getImgPath(url){
			return imgPath(url);
		},
	}
};
</script>

<style scoped="scoped">
.middle_title {
  font-size: 20px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #e8e8e8;
  line-height: 20px;
  margin-bottom: 24px;
  width: 100%;
}
.hot_pic {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.hot_pic .hot_pic_item {
  margin-right: 16px;
  margin-bottom: 24px;
  width: 158px;
}
.hot_pic .hot_pic_item .img_box {
  width: 100%;
  height: 89px;
  margin-bottom: 16px;
  border-radius: 4px;
  overflow: hidden;
}
.hot_pic .hot_pic_item .img_box .hot_img_box {
  width: 100%;
}
.hot_pic .hot_pic_item .img_box .hot_img_box:hover {
  transform: scale(1.1);
}
.hot_pic .hot_pic_item .title_description {
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #e8e8e8;
  line-height: 22px;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.hot_pic .hot_pic_item .title_description:hover{
	text-decoration: underline;
}
.hot_pic .hot_pic_item:nth-of-type(2n) {
  margin-right: 0;
}

</style>
